<!DOCTYPE html>
<html>
    <head>
        <title>Gamvas Basic Physics</title>
        <script src="../../js/Box2dWeb-2.1.a.3.min.js"></script>
        <script src="../../js/gamvas.js"></script>
        <script src="physicsplayground.js"></script>
        <script type="text/javascript" src="../common/syntaxhighlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="../common/syntaxhighlighter/scripts/shBrushJScript.js"></script>
        <link type="text/css" rel="stylesheet" href="../common/syntaxhighlighter/styles/shCoreDefault.css"/>
        <script type="text/javascript">SyntaxHighlighter.all();</script>
    </head>
    <body>
        <h1>Gamvas Basic Physics</h1>
        <p>Move cursor left/right to rotate, up/down to zoom, mouseclick within the box to spawn new objects</p>
        <canvas id="gameCanvas" width="640" height="480"></canvas>
        <pre class="brush: js">
// a class for our round physics objects
circleActor = gamvas.Actor.extend({
        create: function(name, x, y) {
            this._super(name, x, y);
            var st = gamvas.state.getCurrentState();
            this.setFile(st.resource.getImage('circle.png'));
            // set physics properties... before...
            this.restitution = 0.4;
            // ... creating the actual physics collision object
            this.bodyCircle(this.position.x, this.position.y, 16);
        }
});

// a class for our polygon objects
triangleActor = gamvas.Actor.extend({
        create: function(name, x, y) {
            this._super(name, x, y);
            var st = gamvas.state.getCurrentState();
            this.setFile(st.resource.getImage('triangle.png'));
            this.restitution = 0.3;
            // add the physics collision body, set coordinates
            // of the polygon clockwise in pixel positions
            this.bodyPolygon(this.position.x, this.position.y, [ [16,0], [32,32], [0,32] ], 16, 16);
            // add a random rotation
            this.setRotation(Math.random()*2*Math.PI);
        }
});

// create our collision objects
wallActor = gamvas.Actor.extend({
        create: function(name, x, y, w, h) {
            this._super(name, x, y);
            var st = gamvas.state.getCurrentState();
            // check if we are a horizontal box or a vertical
            if (w>h) {
                this.setFile(st.resource.getImage('horizontal.png'));
            } else {
                this.setFile(st.resource.getImage('vertical.png'));
            }
            // create a static (non moving) rectangle
            this.bodyRect(this.position.x, this.position.y, w, h, gamvas.physics.STATIC);
        }
});

mainState = gamvas.State.extend({
        init: function() {
            // set how many pixels are considered 1m, this is a very
            // important setting on how realistic the sim looks
            // try to orient it on your objects and how long they
            // would be in real life
            gamvas.physics.pixelsPerMeter = 128;

            // disable object sleeping (third parameter is false)
            var w = gamvas.physics.resetWorld(0, 9.8, false);
            this.counter = 0;
            this.addObjects = [];

            // create a few dynamic circles so something happens
            this.addActor(new circleActor('test', 0, 0));
            this.addActor(new circleActor('test2', 6, -32));
            this.addActor(new circleActor('test3', -16, -40));

            // create the walls
            this.addActor(new wallActor('ground', 0, 230, 640, 20));
            this.addActor(new wallActor('leftWall', -310, 0, 20, 480));
            this.addActor(new wallActor('rightWall', 310, 0, 20, 480));
            this.addActor(new wallActor('top', 0, -230, 640, 20));
        },

        draw: function(t) {
            // move/rotate the camera
            if (gamvas.key.isPressed(gamvas.key.LEFT)) {
                this.camera.rotate(-0.7*Math.PI*t);
            }
            if (gamvas.key.isPressed(gamvas.key.RIGHT)) {
                this.camera.rotate(0.7*Math.PI*t);
            }
            if (gamvas.key.isPressed(gamvas.key.UP)) {
                if (this.camera.zoomFactor &lt; 1.5) {
                    this.camera.zoom(0.7*t);
                }
            }
            if (gamvas.key.isPressed(gamvas.key.DOWN)) {
                if (this.camera.zoomFactor > 0.1) {
                    this.camera.zoom(-0.7*t);
                }
            }
            var r = this.camera.rotation;

            // get a vector (note: we use positive 9.8 as our gravity
            // as our y coordinate runs down the screen)
            var vec = new gamvas.Vector2D(0, 9.8);

            // rotate this vector around the negative rotation
            // of the camera and set it as new gravity vector
            // this way our camera will be 'the world' and objects
            // will alwas fall down along the cameras y axis
            gamvas.physics.setGravity(vec.rotate(-r));

            // you should always add physics object in your draw
            // function and not in your event functions, as events
            // can take place all the time and it could lead to
            // flickering and other problems adding objects in
            // event handlers
            while (this.addObjects.length > 0) {
                // get the current and remove it from the array
                var curr = this.addObjects.shift();
                console.log(this.addObjects.length);

                // randomize object type
                //
                // note for object creation:
                //
                // all actors need a unique name, so we use a counter
                //
                // also note that events can take place at any time
                // for the simplicity of the tutorial we create our
                // objects here, in real life you should add your 
                if (Math.random() &lt; 0.5) {
                    // spawn new polygon object
                    this.addActor(new triangleActor('mousegenerated'+this.counter, curr.x, curr.y));
                } else {
                    // spawn new circular object
                    this.addActor(new circleActor('mousegenerated'+this.counter, curr.x, curr.y));
                }
                this.counter++;
            }
        },

        onMouseDown: function(b, x, y) {
            // do we have a left mouse button press?
            if (b == gamvas.mouse.LEFT) {
                // have we reached the limit of dynamic objects?
                if (this.counter &lt; 50) {
                    // convert the screen mouse position to world position
                    var worldMouse = this.camera.toWorld(x, y);
                    // are we in our box?
                    if ( (worldMouse.x &lt; 300) && (worldMouse.x > -300) && (worldMouse.y &lt; 220) && (worldMouse.y > -220)) {
                        // save that we have to add our object (read draw comments
                        // to know why)
                        this.addObjects.push(new gamvas.Vector2D(worldMouse.x, worldMouse.y));
                    }
                }
            }
        }
});

// prevent the browser from scrolling on keyboard input
gamvas.config.preventKeyEvents = true;

// fire up our game
gamvas.event.addOnLoad(function() {
    gamvas.state.addState(new mainState('mainState'));
    gamvas.start('gameCanvas', true);
});
        </pre>
    </body>
</html>
